<template>
  <el-dialog :visible.sync="visible"
    :title="`需求长度:[${(optionsParams.planQty - optionsParams.bindQty) * spuSize}]毫米 ===> 已选长度[${optionsParams.selectLen}]毫米`"
    :close-on-click-modal="false" :close-on-press-escape="false">
    <el-table v-loading="tableLoading" ref="Table" class="distributionTable" :data="tableData" border style="width: 100%"
      @selection-change="dataListSelectionChangeHandle">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="stockId" label="id" header-align="center" align="center"></el-table-column>
      <el-table-column prop="spuName" label="型材名称" header-align="center" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="spuSize" label="尺寸" header-align="center" align="center" sortable>
        <template slot-scope="scope">
          {{ scope.row.spuSize }}mm
        </template>
      </el-table-column>
      <el-table-column prop="stockQty" label="库存" header-align="center" align="center" sortable></el-table-column>
      <el-table-column prop="lockedQty" label="预分配" header-align="center" align="center"></el-table-column>
      <el-table-column prop="allotQty" label="需求量" header-align="center" align="center" width="130">
        <template slot-scope="scope">
          <el-input-number :disabled="!scope.isSelected" v-model="scope.row.allotQty"
            :value="scope.isSelected ? scope.row.stockQty - scope.row.lockedQty : 0" @change="allotChange(scope)" :min="0"
            :max="scope.row.stockQty - scope.row.lockedQty" size="mini" label="描述文字"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="contNo" label="托盘条码 " header-align="center" align="center"></el-table-column>
      <el-table-column prop="curPosition" label="所在位置" header-align="center" align="center"
        min-width="130"></el-table-column>
      "<el-table-column prop="stockSt" label="" header-align="center" align="center"></el-table-column>
    </el-table>
    <el-pagination :current-page="optionsParams.page" :page-sizes="[10, 20, 50, 100]" :page-size="optionsParams.limit"
      :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle">
    </el-pagination>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确认配货</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data() {
    return {
      visible: false,
      spuOptions: [],
      total: 0,
      optionsParams: {
        spuNo: '',
        positionType: 'HW',
        planQty: '',
        bindQty: '',
         selectLen: 0,
        page: 1,
        limit: 10
      },
      spuSize: 0,
      detailId: '',
      allotQtyList: [],
      submitParams: [],
      tableData: [],
      tableLoading: false
    }
  },
  computed: {

  },
  watch: {
    visible(val) {
      if (val) {
        this.queryOptions()
      }
    }
  },
  created() {
    this.queryOptions()
  },
  methods: {
    allotChange(scope) {
      // 手动触发selection事件
      this.$refs.Table.toggleRowSelection(scope.row)
      this.$refs.Table.toggleRowSelection(scope.row)
    },
    // 分页, 当前页
    pageCurrentChangeHandle(val) {
      this.optionsParams.page = val
      this.queryOptions()
    },
    pageSizeChangeHandle(val) {
      this.optionsParams.limit = val
      this.queryOptions()
    },
    dataListSelectionChangeHandle(stockList, v) {
      this.optionsParams.selectLen = 0;
      if (stockList.length === 0) {
        this.submitParams = []
        return
      }
      this.submitParams = []
      const sel = stockList.map((item) => item.stockId)
      stockList.forEach((item) => {
        this.submitParams.push({
          detailId: this.detailId,
          stockId: item.stockId,
          allotQty: item.allotQty
        })
        //计算所选长度
        this.optionsParams.selectLen += item.allotQty * item.spuSize;
      })
    },
    queryOptions() {
      this.tableLoading = true
      this.$http.get('/wms/stock/page', { params: this.optionsParams }).then(({ data: res }) => {
        this.tableLoading = false
        if (res.code !== 0) {
          this.tableData = []
          this.total = 0
          return this.$message.error(res.msg)
        }
        this.tableData = res.data.list
        // 给表格加入allotQty并赋默认值
        this.tableData.forEach((item) => {
          this.$set(item, 'allotQty', item.stockQty - item.lockedQty)
        })
        this.total = res.data.total
      })
    },
    init() {
      this.visible = true
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {

      if (this.submitParams.length === 0 || this.optionsParams.selectLen === 0) {
        this.$message.warning('请选择目标库存!');
        return
      }
      this.$http.post('/wms/order-detail/manual-allot', this.submitParams).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.visible = false
            this.$emit('refreshDataList')
          }
        })
      }).catch(() => { })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}

.distributionTable {
  .el-input-number--mini {
    width: 100px;
  }
}
</style>
